<script setup>
import { ref, inject } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { BREADCRUMBS } from '@/plugins/global';

const axios = inject('axios'), router = useRouter();

// ---- 登录：请求员工登录接口并全局缓存令牌&用户信息，随后跳转至主页。
const loginFormModel = ref({
  staffAccount: 'shuoshuren',
  password: 'ssr082923!@#'
});
const loginFormRef = ref(null);
const loginFormRules = ref({
  staffAccount: [{ required: true, message: '请输入账号！', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码！', trigger: 'blur' }]
});
const login = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      axios.post('/api/cms-web/oauth/account/login', {
        staffAccount: loginFormModel.value.staffAccount,
        password: loginFormModel.value.password
      }).then(response => {
        if (response.data.success) {
          // ---- 全局缓存访问令牌。
          ElMessage.success('登录成功！');
          localStorage.setItem('token', response.data.data.access_token);
          // ---- 重置面包屑。
          BREADCRUMBS.splice(0, BREADCRUMBS.length);
          // ---- 跳转至主页。
          router.push({ name: 'Home' });
        } else {
          ElMessage.error(response.data.message);
        }
      });
    }
  });
};
// ---- 重置登录表单。
const resetLoginForm = () => {
  if (loginFormRef.value) {
    loginFormRef.value.resetFields();
  }
};
</script>

<template>
  <div class="page-div-class">
    <div class="content-div-class">
      <!-- 左侧LOGO -->
      <div class="logo-div-class">
        <img alt="world logo" class="logo-img-class" src="@/assets/logo.svg" />
        <div>
          <h1>[旅行]内容管理系统</h1>
          <h3>让我们一起畅享世界！</h3>
        </div>
      </div>
      <!-- 右侧表单 -->
      <div class="login-div-class">
        <el-form :model="loginFormModel" ref="loginFormRef" :rules="loginFormRules" label-width="50px"
          class="login-form-class">
          <el-form-item prop="staffAccount" label="账号">
            <el-input v-model="loginFormModel.staffAccount" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input type="password" v-model="loginFormModel.password" autocomplete="off" show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login()" style="width: 70%">登录</el-button>
            <el-button @click="resetLoginForm()" style="width: 25%">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<!-- 定义样式 -->
<style scoped>
.page-div-class {
  /* ---- 盒子布局：主轴 - 纵轴/上头下尾/居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* ---- 宽度/高度：100%/100% */
  width: 100%;
  height: 100%;
}

.content-div-class {
  /* ---- 网格布局：1行，2列（2:1） */
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* ---- 宽度/高度：100%/80% */
  width: 100%;
  height: 80%;
}

.logo-div-class {
  /* ---- 盒子布局：主轴 - 横轴/左头右尾/居中；副轴 - 纵轴/上头下尾/居中 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* ---- 右侧边框：黑色可见 */
  border-right: 2px solid black;
}

.logo-img-class {
  /* ---- 宽度/高度：150像素 */
  width: 150px;
  height: 150px;
  /* ---- 右外边距：2rem */
  margin-right: 2rem;
}

.login-div-class {
  /* ---- 盒子布局：主轴 - 横轴&左头右尾/居头；副轴 - 纵轴/上头下尾/居中 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.login-form-class {
  width: 350px;
}

h1 {
  font-weight: 700;
  font-size: 5rem;
  position: relative;
  top: -10px;
  color: hsla(160, 100%, 37%, 1);
  text-align: center
}

h3 {
  font-size: 1.5rem;
  text-align: center
}
</style>